<template>
	<a-form :model="formState" :rules="rules" ref="formRef">
		<div class="items">
			<div style="width:100%">
				<p>部门编号<span class="my_required">*</span></p>
				<a-form-item name="depNum">
					<MyInput :modelV="formState.depNum" @submit="formState.depNum = $event" :maxlength="12" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>部门名称<span class="my_required">*</span></p>
				<a-form-item name="title">
					<MyInput :modelV="formState.title" @submit="formState.title = $event" :maxlength="11" />
				</a-form-item>
			</div>
		</div>
		<!-- <div class="items">
			<div style="width:100%">
				<p>上级部门</p>
				<a-form-item name="exe_director">
					<a-select v-model:value="formState.exe_director" :options="departSelectList"  />
				</a-form-item>
			</div>
		</div> -->
		<div class="items" v-if="!currentInfo.id || currentInfo.pid>0">
			<div style="width:100%">
				<p>上级部门</p>
				<a-form-item name="pid">
					<a-select v-model:value="formState.pid" :options="departSelectList"  />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>部门备注</p>
				<a-form-item name="remark">
					<a-textarea v-model:value="formState.remark" :autoSize="{ minRows: 3 }" placeholder="请输入..." />
				</a-form-item>
			</div>
		</div>
		<div class="bottom-btn">
			<MyButton class="reaset" @click="$emit('onReset')" title="取消" />
			<MyButton class="submit" @click="handleSubmit" title="保存" />
		</div>
	</a-form>
</template>

<script lang="ts" setup>
	import { ref, watch,computed } from "vue";
	import { useOrganization } from "@/store";
	import cloneDeep from 'lodash/cloneDeep';
	import debounce from "@/utils/debounce";
	import message from "@/utils/message";
	import { createDep, updateDep } from "@/api/orang";
	
	const PROPS = defineProps({
		currentInfo: {
			type: Object,
			default() {
				return {};
			},
		},
	});
	const OrganStore = useOrganization();
	const PATIENTEMIT = defineEmits(["onSubmit"]);
	const departSelectList = computed(()=> OrganStore.$state.departSelectList.filter((item)=> item.value != PROPS.currentInfo.id) );
	
	const formRef = ref();
	const formState = ref < any > ({});
	const rules = {
		depNum: [{trigger: 'blur',message: "请输入部门编号"}],
		title: [{trigger: 'blur',message: "请输入部门名称"}],
	};
	
	const handleSubmit = debounce(()=>{
		formRef.value.validate().then(async (values: any) => {
			if(formState.value.id){
				const result = await updateDep(formState.value);
				if (!result) return;
				message.success('修改部门成功');
				PATIENTEMIT("onSubmit");
			}else{
				const result = await createDep(formState.value);
				if (!result) return;
				message.success('新增部门成功');
				PATIENTEMIT("onSubmit");
			}
		});
	},50);
	
	watch(()=>PROPS.currentInfo,(obj)=>{
		formState.value = cloneDeep(obj);
	},{ immediate:true });
	
</script>

<style lang="less" scoped>
	.items{
		display: flex;
		// height:60px;
		align-items: center;
		>div{
			display: flex;
			align-items: center;
			margin-top:20px;
			margin-right:15px;
			>p:nth-of-type(1){
				margin-right:10px;
				width:5em;
				text-align: right;
			}
		}
	}
	.my_required{
		color: #ff4d4f;
		font-size: 12px;
		font-family: SimSun, sans-serif;
		line-height: 1;
		margin-left: 6px;
	}
	.reaset,.submit{
		width:20%;
	}
</style>